<template>
  <!-- 显示 d.num 属性的四舍五入取整后的值（若不加四舍五入，滚动时会显示小数点后面的数字） -->
  <div class="font-bold text-2xl">{{d.num.toFixed(0)}}</div>

</template>

<script setup>
import {reactive,watch} from "vue";
import {gsap} from "gsap";
// 总数值
const  d = reactive({num:0})

// 对外暴露的属性值
const props = defineProps({
  value: {
    type: Number,
    default: 0
  }
})

function animateToValue(){
  gsap.to(d, { duration: 0.5,num:props.value })
}

animateToValue()
// 侦听属性, 监听 props.value 的变化，一旦 props.value 发生变化，就调用 animateToValue 函数执行动画

watch(()=>props.value,()=>animateToValue())
</script>
<style scoped>

</style>
